
<div class="container" style="width: 600px;max-width: 100%" ng-if="!loading">
    <div class="row" ng-if="!user.node && !Gateway">
        <div data-ng-if="hasConnections">
            <div class="col-md-12 text-center">
                <img src="images/conn_sync-100.png" class="margin-bottom">
                <h3>
                    Welcome!
                </h3>
                <p class="lead">
                    No active connection to Kong Admin was found.<br>
                    <small class="text-muted">Activate one from the <a ui-sref="connections">Connections</a> page.</small>
                </p>

            </div>
        </div>
        <div data-ng-if="!hasConnections">
            <div class="col-md-12 text-center">
                <img src="images/conn_sync-100.png" class="margin-bottom">
                <h3>
                    Welcome!
                </h3>
                <p class="lead">
                    First of all, lets setup a connection to Kong Admin.<br>
                    <small class="text-muted">Select a connection type.</small>
                </p>

            </div>
            <div class="col-md-12">
                <div ng-include="'js/app/connections/partials/create-connection-form-flat.html?r=' + Date.now()"
                     class=""></div>
            </div>
        </div>
    </div>
    <div class="row" ng-if="user.node && !Gateway && error">
        <div class="col-md-12 text-center">
            <img src="images/attention.png" class="margin-bottom">
            <h2>
                Something went wrong...
            </h2>
            <p class="lead">
                Failed to connect to <strong>{{user.node.name}}</strong>.<br>
                Make sure your active <a ui-sref="connections">connection</a> is valid and Kong is up and running.
            </p>

        </div>
    </div>
</div>

<konga-loader message="Connecting to node. Please wait.." ng-if="loading && !error"></konga-loader>

<div data-ng-if="!loading && !error && info">

    <div class="row">
        <!-- CONNECTIONS -->
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title">
                        <i class="mdi mdi-lan-connect"></i>&nbsp;
                        CONNECTIONS
                        <span class="pull-right" uib-tooltip="{{status.server.total_requests}}">
                            Total Requests: <strong>{{convert2Unit(status.server.total_requests)}}</strong>
                        </span>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="row text-center">
                        <div class="col-sm-2" uib-tooltip="{{status.server.connections_active}}">
                            <strong>ACTIVE</strong>
                            <h3>{{convert2Unit(status.server.connections_active)}}</h3>
                        </div>
                        <div class="col-sm-2" uib-tooltip="{{status.server.connections_reading}}">
                            <strong>READING</strong>
                            <h3>{{convert2Unit(status.server.connections_reading)}}</h3>
                        </div>
                        <div class="col-sm-2" uib-tooltip="{{status.server.connections_writing}}">
                            <strong>WRITING</strong>
                            <h3>{{convert2Unit(status.server.connections_writing)}}</h3>
                        </div>
                        <div class="col-sm-2" uib-tooltip="{{status.server.connections_waiting}}">
                            <strong>WAITING</strong>
                            <h3>{{convert2Unit(status.server.connections_waiting)}}</h3>
                        </div>
                        <div class="col-sm-2" uib-tooltip="{{status.server.connections_accepted}}">
                            <strong>ACCEPTED</strong>
                            <h3>{{convert2Unit(status.server.connections_accepted)}}</h3>
                        </div>
                        <div class="col-sm-2" uib-tooltip="{{status.server.connections_handled}}">
                            <strong>HANDLED</strong>
                            <h3>{{convert2Unit(status.server.connections_handled)}}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END CONNECTIONS -->


    </div>
    <div class="row" ng-if="!isGatewayVersionEqOrGreater('0.11.0')">
        <!-- DATABASE -->
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title">
                        <i class="mdi mdi-database"></i>&nbsp;
                        DATABASE
                    </div>
                </div>
                <div class="panel-body">
                <span class="label label-default" ng-repeat="(key,value) in status.database">
                    {{key.toUpperCase()}} : {{value}}
                </span>
                </div>

            </div>
        </div>
        <!-- END DATABASE -->
    </div>
    <div class="row" vertilize-container>
        <!-- NODE INFO -->
        <div class="col-md-4">
            <div class="panel panel-default" vertilize>
                <div class="panel-heading">
                    <div class="panel-title">
                        <i class="mdi mdi-information-outline"></i>&nbsp;NODE INFO
                    </div>
                </div>
                <table class="table no-margin">
                    <tr>
                        <th>HostName</th>
                        <td>{{info.hostname}}</td>
                    </tr>
                    <tr>
                        <th>Tag Line</th>
                        <td>{{info.tagline}}</td>
                    </tr>
                    <tr>
                        <th>Version</th>
                        <td>{{info.version}}</td>
                    </tr>
                    <tr>
                        <th>LUA Version</th>
                        <td>{{info.lua_version}}</td>
                    </tr>
                    <tr>
                        <th>Admin listen</th>
                        <td>{{info.configuration.admin_listen}}</td>
                    </tr>
                </table>
            </div>
        </div>
        <!-- END NODE INFO -->
        <!-- TIMERS -->
        <div class="col-md-4">
            <div class="panel panel-default" vertilize>
                <div class="panel-heading">
                    <div class="panel-title">
                        <i class="mdi mdi-timer"></i>&nbsp;
                        TIMERS
                    </div>
                </div>
                <div class="panel-body">
                    <canvas id="timers"
                            class="chart chart-horizontal-bar"
                            chart-data="data.timers.data"
                            chart-labels="data.timers.labels"
                            chart-options="data.timers.options"
                            chart-series="data.timers.series">
                    </canvas>
                </div>
            </div>
        </div>
        <!-- END -->

        <!-- DATABASE INFO -->
        <div class="col-md-4">
            <div class="panel panel-default" vertilize>
                <div class="panel-heading">
                    <div class="panel-title">
                        <i class="mdi mdi-information-outline"></i>&nbsp;DATASTORE INFO
                        <span ng-if="isGatewayVersionEqOrGreater('0.11.0')"
                              ng-class="{'text-success' : status.database.reachable, 'text-danger' : !status.database.reachable}"
                              class="pull-right">
                            <small>{{status.database.reachable ? 'Reachable' : 'Unreachable'}}</small>
                        </span>
                    </div>
                </div>
                <table class="table no-margin">
                    <tr>
                        <th>DBMS</th>
                        <td>{{info.configuration.database}}</td>
                    </tr>
                    <tr ng-if="info.configuration.database == 'postgres'">
                        <th>Host</th>
                        <td>{{info.configuration.pg_host}}</td>
                    </tr>
                    <tr ng-if="info.configuration.database == 'cassandra' && info.configuration.cassandra_contact_points">
                        <th>Contact points</th>
                        <td>{{info.configuration.cassandra_contact_points.join(", ")}}</td>
                    </tr>
                    <tr ng-if="info.configuration.database == 'cassandra' && info.configuration.cassandra_keyspace">
                        <th>Keyspace</th>
                        <td>{{info.configuration.cassandra_keyspace}}</td>
                    </tr>
                    <tr ng-if="info.configuration.database == 'cassandra' && info.configuration.cassandra_data_centers">
                        <th>Data Centers</th>
                        <td>{{info.configuration.cassandra_data_centers.join(", ")}}</td>
                    </tr>
                    <tr ng-if="info.configuration.database == 'postgres'">
                        <th>Database</th>
                        <td>{{info.configuration.pg_database}}</td>
                    </tr>
                    <tr ng-if="info.configuration.database == 'postgres'">
                        <th>User</th>
                        <td>{{info.configuration.pg_user}}</td>
                    </tr>
                    <tr ng-if="info.configuration.database == 'cassandra'">
                        <th>Username</th>
                        <td>{{info.configuration.cassandra_username}}</td>
                    </tr>
                    <tr ng-if="info.configuration.database == 'postgres'">
                        <th>Port</th>
                        <td>{{info.configuration.pg_port}}</td>
                    </tr>
                    <tr ng-if="info.configuration.database == 'cassandra'">
                        <th>Port</th>
                        <td>{{info.configuration.cassandra_port}}</td>
                    </tr>
                </table>
            </div>
        </div>
        <!-- END DATABASE INFO -->


    </div>
    <div class="row">
        <!-- PLUGINS -->
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title">
                        <i class="mdi mdi-power-plug"></i>&nbsp;
                        PLUGINS
                    </div>
                </div>
                <div class="panel-body">
                <span class="label"
                      data-ng-class="{'label-default' : !isEnabled(key),'label-success' : isEnabled(key)}"
                      data-ng-repeat="(key,value) in info.plugins.available_on_server">
                    {{key}}
                </span>
                </div>
            </div>
        </div>
        <!-- END PLUGINS -->
    </div>
    <div class="row" ng-if="showCluster">
        <!-- CLUSTER -->
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title">
                        <i class="mdi mdi-server-network"></i>&nbsp;
                        CLUSTER ({{clusters.total}} nodes)
                    </div>
                </div>
                <div class="panel-body no-padding table-responsive">
                    <div ng-controller="ClusterListController" ng-include="'js/app/cluster/views/partials/cluster-list.html?r=' + Date().now"></div>
                </div>

            </div>
        </div>
        <!-- END CLUSTER -->
    </div>
</div>



